﻿@{
    ViewBag.Title = "FirstMap";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
    #map {
      width: 100%;
      height: 500px;
      border: 1px solid #000;
    }
</style>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    window.onload = function () {

        // Creating a reference to the mapDiv
        var mapDiv = document.getElementById('map');

        // Creating a latLng for the center of the map
        var latlng = new google.maps.LatLng(31.416944, 121.490936);

        // Creating an object literal containing the properties 
        // we want to pass to the map  
        var options = {
            center: latlng,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Creating the map
        var map = new google.maps.Map(mapDiv, options);

        // map info
        ZEUS.DEBUG.log("Current Zoom Level: " + map.getZoom());
        ZEUS.DEBUG.log("Current Center: " + map.getCenter());
        ZEUS.DEBUG.log("Current Map Type: " + map.getMapTypeId());
    }
</script>


<h2>My First Map</h2>
<br />
<h3>Path: @ViewBag.Path</h3>
<br />
<h3>See the result on console</h3>
<br />

<div id="map"></div>
